<!-- Page header -->
<style>
    /* 遮罩层 */
    #overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    /* IE9以下不支持rgba模式 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 兼容IE8及以下 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    display: none;
  }
  /* 弹出框主体 */
  .popup {
    background-color: #ffffff;
    max-width: 400px;
    min-width: 200px;
    height: 240px;
    border-radius: 5px;
    margin: 100px auto;
    text-align: center;
  }
  /* 弹出框的标题 */
  .popup_title {
    height: 60px;
    line-height: 60px;
    border-bottom: solid 1px #cccccc;
  }
  /* 弹出框的内容 */
  .popup_content {
    height: 50px;
    line-height: 50px;
    padding: 15px 20px;
  }
  /* 弹出框的按钮栏 */
  .popup_btn {
    margin-top: 50px;
  }
  /* 弹出框的按钮 */
  .popup_btn button {
    color: #778899;
    width: 40%;
    height: 40px;
    cursor: pointer;
    border: solid 1px #cccccc;
    border-radius: 5px;
    margin: 5px 10px;
    color: #ffffff;
    background-color: #337ab7;
  }
</style>


<div class="page-header d-print-none">
  <div class="container-xl">
    <!-- 帖子Id -->
    <input type="text" style="display: none;" id="details_article_id">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- 帖子标题 -->
        <h2 class="page-title" id="details_article_title"></h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <div class="row">
        <!-- 作者区 -->
        <div class="col-3 card">
          <div class="card-body p-4 text-center">
            <span class="avatar avatar-xl mb-3 rounded" style="background-image: url(./image/avatar01.jpeg)"
              id="article_details_author_avatar"></span>
            <h3 class="m-0 mb-1"><a href="javascript:void(0);" id="article_details_author_name"></a></h3>
            <div style="margin-top: 10px;" id="div_details_send_message">
              <a href="javascript:void(0);" class="btn btn-primary" id="btn_details_send_message" data-bs-toggle="modal" data-bs-target="#index_message_modal">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24"
                  viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z">
                  </path>
                  <path d="M3 7l9 6l9 -6"></path>
                </svg>
                发私信
              </a>
            </div>
          </div>
        </div>
        <div class="col-9 card card-lg">
          <!-- 帖子正文 -->
          <div class="card-body">
            <h1 id="details_article_content_title"></h1>
            <div id="details_article_content"></div>
          </div>
          <!-- 卡片页脚 -->
          <div class="col-auto details-is-own">
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
              <a href="javascript:void(0);" class="btn btn-tabler w-100" id="back">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                  height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                  stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                  <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                  <path d="M16 5l3 3"></path>
                </svg>
                <span>预约</span>
              </a>
            </div>
          </div>
          
        
          <div id="overlay">
            <div class="popup">
              <p class="popup_title">预约时间</p>
              <p class="popup_title">（上班时间：9：00 - 12：00，14：00 - 18：00）</p>
              <p class="popup_content">日期：<input type="text" id="datepicker" size="30">
              </p>
               
              <div class="popup_btn">
                <button class="cancelBtn" onclick="hidePopup()">取消</button>
                <button class="confirmBtn" id = 'sub'>确认</button>
              </div>
            </div>
          </div>

          <!-- 操作区 结束 -->
          
        </div>
      </div>

    
    </div>
  </div>
</div>

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

<script>


  $(function () {
    // ===================== 初始化回复编辑区 ===================== 
    var editor = editormd("article_details_reply", {
      width: "100%",
      height: "100%",
      // theme : "dark",
      // previewTheme : "dark",
      // editorTheme : "pastel-on-dark",
      autoFocus: false, // 关闭自动获得焦点
      codeFold: true,
      markdown : '', // 处理编辑区内容
      //syncScrolling : false,
      saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
      searchReplace: true,
      watch: false,                    // 关闭实时预览
      htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
      // toolbar  : false,             //关闭工具栏
      // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
      emoji: true,
      taskList: true,
      tocm: true,         // Using [TOCM]
      tex: true,                     // 开启科学公式TeX语言支持，默认关闭
      // flowChart : true,               // 开启流程图支持，默认关闭
      // sequenceDiagram : true,         // 开启时序/序列图支持，默认关闭,
      placeholder: '开始创作...',     // 占位符
      path: "./dist/editor.md/lib/"
    });

    
    console.log('----查看咨询师id')
    console.log(currentConUser.conUser.id);
    $.ajax({
      type : 'get',
      url : 'article/selectById?id=' + currentConUser.conUser.id,
      success : function (respDate) {
        console.log('详情页功能');
        console.log(respDate.code);
        if(respDate.code == 0) {
          initArticleDetails(respDate.data);
        } else {
          //console.log('查看id');
          //console.log(currentArticle.id);
          $.toast({
            heading: '警告',
            text: respDate.message,
            icon: 'warning' 
          });
        }

      },
      error : function () {
        $.toast({
          heading: '错误',
          text: '服务器错误，请联系管理员',
          icon: 'error' 
        });
      }

    });

    // ===================== 初始化页面内空 ======================
    function initArticleDetails(article) {
      // 设置当前操作的帖子为最新查询出来的值
      currentArticle = article;
      // 默认头像路径
      if (!article.conUser.avatarUrl) {
        article.conUser.avatarUrl = avatarUrl;
      }

      // 设置头像
      $('#article_details_author_avatar').css('background-image', 'url(' + article.conUser.avatarUrl + ')');
      // 设置用户名
      $('#article_details_author_name').html(article.conUser.nickname);
      // 设置帖子Id
      //$('#details_article_id').val(article.id);
      // 设置咨询师名字
      //$('#details_article_title').html(article.conUser.username);
      // 设置发布时间
      //$('#details_article_createTime').html(article.createState);
      // 设置访问数量
     // $('#details_article_visitCount').html(article.visitCount);
      // 设置点赞数
     // $('#details_article_likeCount').html(article.likeCount);
      // 设置回复数
      //$('#details_article_replyCount').html(article.replyCount);
      // 帖子正文
      $('#details_article_content_title').html(article.conUser.username);
      // 让内容以markdown 的形式显示
      editormd.markdownToHTML('details_article_content', { markdown: article.conUser.remark });
      // 编辑权限通过后台返回的属性值处理
      if (article.own) {
        $('.details-is-own').show();
      }
      // 是否显示站内信按钮
      if (article.conUser.id == currentUserId) {
        $('#div_details_send_message').hide();
      } else {
        // 设置站内信目标用户信息
        $('#btn_details_send_message').click(function() {
          setMessageReceiveUserInfo(article.conUser.id, article.conUser.nickname);
        });
      }
      // 个人帖子列表
      /*
      $('#article_details_author_name').click(function () {
          // 设置要查看用户的Id
          profileUserId = article.userId;
          // 是否为当前登录用户
          if (article.userId == currentUserId) {
            profileUserId = undefined;
          }
          $('#bit-forum-content').load('profile.html');
        });
        */

    }

    

    // ====================== 处理预约事件 ======================
    //构造数据
    $('#back').click(function () {

      var overlay = document.getElementById("overlay");
      overlay.style.display = "block";
      console.log("查看时间")
      $('#datepicker').datepicker();
    });
  });

 

  $('#sub').click(function(){
    
    console.log('点击确认按钮');

    /*
    //1.输入框参数校验
    if($('#datepicker').val == " " ) {
      console.log('检查内容');
      alert('请输入预约时间');
    }
    */
    console.log($('#datepicker').val());

    //2.构造数据
  let postData = {
    receiveUserId : currentConUser.conUser.id,
    bookingTime : $('#datepicker').val()
  };

 console.log(postData);

  
  $.ajax({
    type : 'post',
    url : 'booking/create',
    contentType : 'application/x-www-form-urlencoded',
    data : postData,
    success : function(respDate) {
      
      if(respDate.code == 0) {
        console.log('新增成功');
        hidePopup();
        alert('预约成功！');
       
      } else {
        hidePopup();
        alert('不要重复预约！');
        }
      },
      error : function() {
        $.toast({
            heading: '错误',
            text: '服务器错误，请联系管理员',
            icon: 'error' 
          });
      }
    }) 



  }); 

  function hidePopup(){
    var overlay = document.getElementById("overlay");
    overlay.style.display = "none";
  }


</script>